<template>
	<view style="padding: 30rpx;">
		<u-row customStyle="padding: 50rpx;background-color: #73de87;border-radius: 50rpx;" @click="toLogin">
			<u-col span="4">
				<u-avatar randomBgColor="true" size="70" :text="userInfo?userInfo.nickName.substring(0,2):''"></u-avatar>
			</u-col>
			<u-col span="8">
				<view v-if="userInfo">
					<view>
						<u--text size="20" :text="userInfo.nickName"></u--text>
					</view>
					<view style="display: flex;margin-top: 10rpx;">
						<view><u--text size="17" text="手机:"></u--text></view>
						<u--text size="17" mode="phone" format="encrypt" :text="userInfo.phone"></u--text>
					</view>
				</view>
				<u--text v-else size="25" text="点我登录"></u--text>
			</u-col>
		</u-row>
		<u-row customStyle="margin-top: 50rpx;">
			<u-cell-group>
				<u-cell @click="myOrders()" icon="setting-fill" title="我的订单" isLink></u-cell>
				<u-cell @click="calling()" icon="integral-fill" title="客服电话" isLink></u-cell>
				<u-cell @click="logout()" icon="integral-fill" title="退出登录" isLink></u-cell>
			</u-cell-group>
		</u-row>
		<u-row></u-row>
		<u-modal :show="logoutModal" @cancel="logoutModalCancel" @confirm="logoutModalOk" showCancelButton="true" title="提示" content='确认退出登录么？'></u-modal>
	</view>
</template>

<script>
	import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		components: {
			UniIcons
		},
		data() {
			return {
				userInfo:null,
				logoutModal:false,
			}
		},
		async onLoad() {
			if (this.loginState) {
				const userInfo = await this.$http_api.userInfo({});
				if (!userInfo) {
					return;
				}
				this.userInfo = userInfo;
			}
		},
		computed: {
		  ...mapState(['loginState'])
		},
		methods: {
			...mapActions(['userLogoutAction']),
			toLogin() {
				if (!this.loginState) {
					uni.navigateTo({
						url: '/pages/login/login?successUrl=/pages/home/index'
					})
					return;
				}
			},
			logout() {
				this.logoutModal = true;
			},
			logoutModalOk(){
				this.userLogoutAction();
				this.userInfo = null;
				this.logoutModal = false;
				uni.reLaunch({
					url: '/pages/home/index'
				})
			},
			logoutModalCancel(){
				this.logoutModal = false;
			},
			
			myOrders() {
				if(!this.loginState) {
					uni.navigateTo({
						url: '/pages/login/login?successUrl=/pages/home/index'
					})
					return;
				}
				
				uni.navigateTo({
					url: '/pages/orders/orders'
				})
			},
			calling: function() {
				let phoneNumber = '15093359880';
				console.log('==phoneNumber===', phoneNumber)
				uni.makePhoneCall({
					phoneNumber: phoneNumber,
					success: function() {
						console.log("拨打电话成功！")
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})
			},
			chooseAvatar(e) {
				console.log("chooseAvatar:", e)

			},
			heZuo() {
				uni.navigateTo({
					url: "/pages/webview/webview"
				})
			},
			wxPay() {
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: String(Date.now()),
					nonceStr: 'A1B2C3D4E5',
					package: 'prepay_id=wx20180101abcdefg',
					signType: 'MD5',
					paySign: '',
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					}
				});
			},
			onChooseAvatar(res) {
				console.log(res)
				const {
					detail
				} = res
				this.cdnUrl = detail.avatarUrl
			},

		}
	}
</script>

<style>

</style>